<template>
  <div>
    <div style="width: 380px; margin: 0 auto;">
      <div class="renew_title">
        {{ trainInfo.setting ? trainInfo.setting.membershipFeeTitle : '' }}
      </div>
      <el-form ref="refRenew" :model="vo" :rules="formRules" size="medium" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="会员办理类型" prop="membershipFeeId">
              <el-select v-model="vo.membershipFeeId" style="width: 100%" class="gl_mr_15" placeholder="请选择" filterable @change="onChangeMembershipFee">
                <el-option v-for="item in shipFeelist" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div v-show="currentFee.id" class="renew_tip">会员办理费用  {{ formatMoney(currentFee.price) }}元/年</div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="会员续费年限" prop="membershipFeeYear">
              <el-select v-model="vo.membershipFeeYear" style="width: 100%" class="gl_mr_15" placeholder="请选择" filterable>
                <el-option v-for="item in years" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <el-row>
      <el-col class="step_btn" :span="24" align="center">
        <el-button @click="onPrevStep">上一步</el-button>
        <el-button type="primary" @click="beforeNextStep">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  api_GET_TrainTrainningMembershipFee // 获取培训会员费列表
} from '@/extend/api/trainswaggerApi/app.js';

export default {
  props: {
    // 传入的个人信息数据
    trainInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    isShow: {
      type: Boolean(),
      default: false
    },
    transferData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data () {
    return {
      pageLoading: true,
      nextLoading: false,
      vo: {
        membershipFeeId: '',
        membershipFeeYear: ''
      },
      shipFeelist: [], // 会员费列表
      currentFee: {}, // 当前选中的会员费
      formRules: {
        membershipFeeId: [
          { required: true, message: '请选择会员办理类型', trigger: 'change' }
        ],
        membershipFeeYear: [
          { required: true, message: '请选择会员续费年限', trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    years () {
      if (this.currentFee.id) {
        const maxYear = this.currentFee.maxYear;
        const minYear = this.currentFee.minYear;
        const _list = [];
        for (let i = minYear; i <= maxYear; i++) {
          _list.push(i);
        }
        return _list;
      } else {
        return [];
      }
    }
  },
  watch: {
    isShow: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getFeeFromTrainInfo();
          // this.getShipFee({
          //   TrainningId: this.trainInfo.id
          // });
        }
      }
    }
  },
  methods: {
    getFeeFromTrainInfo () {
      const _fee = JSON.parse(JSON.stringify(this.trainInfo.membershipFees));
      const _list = _fee || [];
      // 排序
      _list.sort((a, b) => {
        const _a = a.creationTime;
        const _b = b.creationTime;
        if (_a < _b) { return -1; }
        if (_a > _b) { return 1; }
        return 0;
      });
      this.shipFeelist = _list;
    },
    getShipFee (qo) {
      this.pageLoading = true;
      this.nextLoading = true;
      api_GET_TrainTrainningMembershipFee(qo)
        .then(
          res => {
            this.pageLoading = false;
            this.nextLoading = false;
            this.shipFeelist = res.items || [];
          }
        )
        .catch(
          error => {
            this.pageLoading = false;
            this.nextLoading = false;
            this.$message({
              message: `科目获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    onChangeMembershipFee (val) {
      this.vo.membershipFeeYear = '';
      this.currentFee = this.shipFeelist.find(item => item.id === val);
    },
    // 格式化货币格式 （分）
    formatMoney (num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    },
    // 将元转化为分
    yuanToFen(moneyStr) {
      const _moneyStr = String(moneyStr);
      const yuan = Number(_moneyStr.split('.')[0]) || 0;
      const fen = Number(_moneyStr.split('.')[1]) || 0;
      return yuan * 100 + fen;
    },
    onPrevStep () {
      this.$emit('onPrevStep');
    },
    onNextStep () {
      this.$emit('onNextStep');
    },
    beforeNextStep () {
      this.$refs.refRenew.validate((valid) => {
        if (valid) {
          this.$emit('onSetTransferData', 'fee', this.vo);
          this.onNextStep();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .renew_title {
    padding: 80px 0 30px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: #000000;
  }

  .renew_tip {
    padding-left: 23px;
    font-size: 14px;
    color: #606266;
    min-height: 58px;
    line-height: 36px;
    font-weight: 700;
    color: #DC1D1D;
  }
</style>
